<script setup>

const dayjs = useDayjs();

definePageMeta({
	layout: "flat",
})

useHead({
	title: 'HLS: Ввод нарядов',
})
const isUslInput = ref(false)

defineShortcuts({
	insert: {
		usingInput: true,
		handler: () => {
			isUslInput.value = true
		}
	}
})

const urlHome = useUrlRasp();
console.log(urlHome.value);

const uid = ref('');
const pending = ref('');
const patient = ref('');
const patients = ref([]);
const uslugiSelected = ref([]);
async function onEnter() {
	pending.value = true;
	const { data: patientInfo } = await useLazyFetch(urlHome.value + "naryad/api/patient_by_uid/" + uid.value)
	// patient.value = patientInfo.value;
	patient.value = patientInfo.value
	pending.value = false;
}

const { pending: pend, error, data: uslugiAll } = await useLazyFetch(urlHome.value + "naryad/api/uslugi_all/")
const uslugi = ref([]);
uslugi.value = uslugiAll.value;
const isOpen = ref(false);
const hrefFile = ref("");
const teeth = ref([]);
const isOpenMenu = ref(false)
const uslInput = ref('')
const colInput = ref(1)

const codeList = ref(['2.8', '2.6', '2.6.12'])

defineShortcuts({
	escape: {
		usingInput: true,
		handler: () => {
			isOpenMenu.value = false
		}
	}
})

const date = ref(new Date())

const label = computed(() => date.value.toLocaleDateString('ru-ru', { year: 'numeric', month: 'short', day: 'numeric' })
)


</script>

<template>
	<div>
		<ul>
			<li class="pb-2">
				<NuxtLink to="/menu">
					<UButton>Меню</UButton>
				</NuxtLink>
			</li>
		</ul>
		<br>
		<h1><b>Поиск</b></h1>
		<div class="max-w-xs">
			<UInput color="primary" size="md" variant="outline" placeholder="Искать по номеру карты..." v-model="uid"
				v-on:keyup.enter="onEnter" />
		</div>
		<!-- <USelect v-model="patient" :options="patients" option-attribute="uid" /> -->
		<div v-if="pending" class="text-2xl font-serif">
			Загрузка
		</div>
		<div class="text-lg">
			<div v-if="patient !== '' && patient?.uid > 0">
				<div class="font-bold">
					Пациент
				</div>
				<div><i>Номер карты: </i><b>{{ patient?.uid }}</b></div>
				<div><i>Имя: </i><b>{{ patient?.fam }} {{ patient?.im }} {{ patient?.ot }}</b></div>
				<div><i>Дата рождения: </i><b>{{ dayjs(patient?.dr).format('DD.MM.YYYY') }}</b></div>
				<div><i>Адресс: </i>{{ patient?.adress }}</div>
			</div>
			<div v-else-if="patient == null" class="font-bold">
				Пациент не найден. Введите данные вручную
				<div class="flex place-content-around">
					<div class="w-80">
						<div>Номер карты
							<UInput color="primary" />
						</div>
						<div>Фамилия
							<UInput color="primary" />
						</div>
						<div>Имя
							<UInput color="primary" />
						</div>
						<div>Отчество
							<UInput color="primary" />
						</div>
					</div>
					<div class="w-80">
						<UPopover :popper="{ placement: 'bottom-start' }">
							<UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />

							<template #panel="{ close }">
								<DatePicker v-model="date" @close="close" />
							</template>
						</UPopover>
						<!-- {{ dayjs(date).format('DD.MM.YYYY') }} -->
						<div>Адресс
							<UInput color="primary" :required="true" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="text-lg" v-if="patient === null">
		</div>

		<div class="text-lg">
			<div>
				<div class="font-bold">
					Услуги
				</div>
				<div v-if="uslugiSelected.length == 0">
					<UButton color="primary" label="Добавить услуг" v-on:click="isUslInput = true" />
				</div>
				<div v-else>
					<UTable :rows="uslugi" />
				</div>
			</div>
		</div>

		<div v-if="patient === '' && !pending" class="text-2xl font-serif">
			Снимки не найдены
		</div>
		<div v-if="patient !== ''">
			<UModal v-model="isOpen">
				<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
					<template #header>
					</template>

					<iframe ref="myIframe" :src="hrefFile" :width="500" :height="700"></iframe>
					<template #footer>
						<UButton label="Закрыть" icon="i-heroicons-x-mark" color="primary" @click="isOpen = false" />
					</template>
				</UCard>
			</UModal>
			<USlideover v-model="isOpenMenu" :overlay="false">
				<div class="p-4 flex-1">
					<div v-for=" one in teeth " :key="one.ImageCode" class="py-2">
						<UButton @click="openModal(one)" variant="ghost">Снимок зуба № {{ one.ImageNumber }} от {{
							one.ImageDate }}
						</UButton>
					</div>
				</div>
			</USlideover>
		</div>
		<UModal v-model="isUslInput">
			<div class="p-4 pb-48">
				<div>
					Введите код услуги
					<USelectMenu ref="theInput" :ui="{ height: 'max-h-60' }" searchable
						searchable-placeholder="Выбрать код услуги..." placeholder="Выберите услугу" color="primary"
						v-model="uslInput" :options="uslugi" option-attribute="name"
						:search-attributes="['kusl', 'nusl']" />
				</div>
				<div>
					Введите код услуги
					<UInput color="primary" v-model="colInput" ref="theInput" />
				</div>
				<div class="pt-4">
					<UButton on-click:close="isUslInput = false">Добавить</UButton>
				</div>
			</div>
		</UModal>
	</div>
</template>
